<template>
  <!-- 需要给.canvas-wrapper元素设置宽高 -->
  <el-card class="box-card">
    <div class="text item">
      <h2 class="text-center">订单管理</h2>
      <el-row>
        <el-col :span="11" offset="1">
          <div class="grid-content bg-purple">
            <div class="canvas-wrapper">
              <h2>柱状图</h2>
              <schart class="schart" canvasId="bar" :options="options"></schart>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <div class="canvas-wrapper">
              <h2>折线图</h2>
              <schart class="schart" canvasId="line" :options="options2"></schart>
            </div>
          </div>
        </el-col>
        <el-col :span="11" offset="1">
          <div class="grid-content bg-purple">
            <div class="canvas-wrapper">
              <h2>饼状图</h2>
              <schart class="schart" canvasId="pie" :options="options3"></schart>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <div class="canvas-wrapper">
              <h2>环形图</h2>
              <schart class="schart" canvasId="ring" :options="options4"></schart>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>




</template>

<script>
import Schart from 'vue-schart'
export default {
  name: 'MyOrders',
  data() {
    return {
      options: {
        type: 'bar',
        title: {
          text: '最近一周各品类销售图',
        },
        bgColor: '#fbfbfb',
        labels: ['周一', '周二', '周三', '周四', '周五'],
        datasets: [{
          label: '家电',
          fillColor: 'rgba(241, 49, 74, 0.5)',
          data: [234, 278, 270, 190, 230]
        }, {
          label: '百货',
          data: [164, 178, 190, 135, 160]
        }, {
          label: '食品',
          data: [144, 198, 150, 235, 120]
        }]
      },
      options2: {
        type: "line",
        title: {
          text: "最近几个月各品类销售趋势图",
        },
        bgColor: "#fbfbfb",
        labels: ["6月", "7月", "8月", "9月", "10月"],
        datasets: [
          {
            label: "家电",
            data: [234, 278, 270, 190, 230],
          },
          {
            label: "百货",
            data: [164, 178, 150, 135, 160],
          },
          {
            label: "食品",
            data: [114, 138, 200, 235, 190],
          },
        ],
      },
      options3: {
        type: "pie",
        title: {
          text: "服装品类销售饼状图",
        },
        legend: {
          position: "left",
        },
        bgColor: "#fbfbfb",
        labels: [
          "T恤",
          "牛仔裤",
          "连衣裙",
          "毛衣",
          "七分裤",
          "短裙",
          "羽绒服",
        ],
        datasets: [
          {
            data: [334, 278, 190, 235, 260, 200, 141],
          },
        ],
      },
      options4: {
        type: "ring",
        title: {
          text: "环形三等分",
        },
        showValue: false,
        legend: {
          position: "bottom",
          bottom: 40,
        },
        bgColor: "#fbfbfb",
        labels: ["vue", "react", "angular"],
        datasets: [
          {
            data: [500, 500, 500],
          },
        ],
      }
    }
  },
  components: {
    Schart
  }
}
</script>

<style lang="less" scoped>



.canvas-wrapper {
  width: 600px;
  height: 450px;
}
.schart {
  width: 600px;
  height: 400px;
}
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #fff;
}

.bg-purple {
  background: #fff;
}

.bg-purple-light {
  background: #fff;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #fff;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  width: 1580px;
}

.box-card {
  width: 100%;
}
</style>